<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form :form="form" slot="detail">
        <a-row>
          <!-- <a-col :span="24" >
            <a-form-item label="货物名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['huaxuepinmingcheng', validatorRules.huaxuepinmingcheng]" placeholder="请输入货物名称" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="货物代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['huaxuepindaima']" placeholder="请输入货物代码" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="回库状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['huikuzhaungtai']" placeholder="请输入回库状态" ></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :span="24" >
            <a-form-item label="回库人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-decorator="['huikurenxingming',validatorRules.huikurenxingming]" placeholder="请输入领用人姓名" >
                  <a-select-option v-for="item in RenyuanList" :value="item">{{ item }}</a-select-option>
                </a-select>
              <!-- <a-input v-decorator="['huikurenxingming', validatorRules.huikurenxingming]" placeholder="请输入回库人姓名" ></a-input> -->
            </a-form-item>
          </a-col>
          <!-- <a-col :span="24" >
            <a-form-item label="回库人部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['huikurenbumen']" placeholder="请输入回库人部门" ></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :span="24" >
            <a-form-item label="回库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择回库时间" v-decorator="['huikushijian',validatorRules.huikushijian]" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="24" >
            <a-form-item label="回库批次号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['huikupicihao']" placeholder="请输入回库批次号" ></a-input>
            </a-form-item>
          </a-col> -->
          <!-- <a-col :span="24" >
            <a-form-item label="回库量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['huikuliang', validatorRules.huikuliang]" placeholder="请输入回库量" style="width: 100%" />
            </a-form-item>
          </a-col> -->
          <!-- <a-col :span="24" >
            <a-form-item label="计量单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['jiliangdanwei']" placeholder="请输入计量单位" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="贮存位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['zhucunweizhi']" placeholder="请输入贮存位置" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="回库申请拍照" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload isMultiple  v-decorator="['huikushenqingpaizhao']" ></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="回库称重拍照" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload isMultiple  v-decorator="['huikuchengzhongpaizhao']" ></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="回库完成拍照" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload isMultiple  v-decorator="['huikuwanchengpaizhao']" ></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="回库原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['huikuyuanyin']" placeholder="请输入回库原因" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['cangkumingcheng', validatorRules.cangkumingcheng]" placeholder="请输入仓库名称" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="公司名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['gongsimingcheng']" placeholder="请输入公司名称" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="到期时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['daoqishijian']" placeholder="请输入到期时间" ></a-input>
            </a-form-item>
          </a-col> -->
        </a-row>
      </a-form>
    </j-form-container>
      <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="回库子表" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="yzdHuikumingxiZiTable.loading"
          :columns="yzdHuikumingxiZiTable.columns"
          :dataSource="yzdHuikumingxiZiTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true">
        
          <template v-slot:action="props">  
            <div >
            <a-select style="width: 175px" :default-value="props.value"   @change="(value)=> setpicihao(value,props)">
                <a-select-option v-for="item in huojiahaolist" :value="item" :trigger-change="true"  >
                  {{ item }} 
              </a-select-option>
            </a-select>
          </div> 
          </template>      
          
          
          <template v-slot:action1="props">  
            <div >
            <a-select style="width: 175px" :default-value="props.value"   @change="(value)=> sethuaxuepin(value,props)">
                <a-select-option v-for="item in select" :value="item" :trigger-change="true"  >
                  {{ item }} 
              </a-select-option>
            </a-select>
          </div> 
          </template>  


          <template v-slot:action2="props">  
            <div >
            <a-select style="width: 175px" :default-value="props.value"   @change="(value)=> setcangkumingcheng(value,props)">
                <a-select-option v-for="item in cangkuminghceng" :value="item" :trigger-change="true"  >
                  {{ item }} 
              </a-select-option>
            </a-select>
          </div> 
          </template> 
        
        </j-editable-table>
      </a-tab-pane>
    </a-tabs>
    <a-row v-if="showFlowSubmitButton" style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提 交</a-button></a-row>
  </a-spin>
</template>

<script>

  import pick from 'lodash.pick'
  import { getAction,postAction } from '@/api/manage'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'YzdHuikumingxiForm',
    mixins: [JEditableTableMixin],
    components: {
    },
    data() {
      return {
      select: [],
      cangkuminghceng:[],
      pingshu: '',
      huojiahaolist: [],
      cangkuming: '',
      huaxuepinming: '',
        RenyuanList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          huaxuepinmingcheng: {
            rules: [
              { required: true, message: '请输入货物名称!'},
            ]
          },
          huikurenxingming: {
            rules: [
              { required: true, message: '请输入回库人姓名!'},
            ]
          },
          huikuliang: {
            rules: [
              { required: true, message: '请输入回库量!'},
            ]
          },
          cangkumingcheng: {
            rules: [
              { required: true, message: '请输入仓库名称!'},
            ]
          },
          huikushijian: {
            rules: [
              { required: true, message: '请选择回库时间!'},
            ]
          },
        },
        refKeys: ['yzdHuikumingxiZi', ],
        tableKeys:['yzdHuikumingxiZi', ],
        activeKey: 'yzdHuikumingxiZi',
        // 回库子表
        yzdHuikumingxiZiTable: {
          loading: false,
          dataSource: [],
          columns: [
          {
              title: '货物名称',
              key: 'huaxuepinmingcheng',
              // type: FormTypes.input,
              type: FormTypes.slot,
              slotName:'action1',
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
            {
              title: '仓库名称',
              type: FormTypes.slot,
              slotName:'action2',
              key: 'cangkumingcheng',
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
            // {
            //   title: '货架号',
            //   key: 'huojiahao',
            //   type: FormTypes.input,
            //   width:"200px",
            //   placeholder: '请输入${title}',
            //   defaultValue:'',
            // },
            {
              title: '重量',
              key: 'zhongliang',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue:'',
            },
            // {
            //   title: '父id',
            //   key: 'pid',
            //   type: FormTypes.input,
            //   width:"200px",
            //   placeholder: '请输入${title}',
            //   defaultValue:'',
            // },
          ]
        },
        url: {
          renyuanurl:"/menjin/menjinrenyuan/list",
          getpicihao: '/yzd_lingyongmingxi/yzdLingyongmingxi/getByHuaxuepinAndCangku',
          huojihao: "/yzd_jichuxinxi/yzdZhucuncangkuxinxi/findhuojiahao",
          cangkumingcheng:"/yzd_jichuxinxi/yzdZhucuncangkuxinxi/huoQuCangKu",
          xialakuang: "/yzd_jichuxinxi/yzdWeixianfeiwuxinxi/list",
          add: "/yzd_lingyongmingxi/yzdHuikumingxi/add",
          edit: "/yzd_lingyongmingxi/yzdHuikumingxi/edit",
          queryById: "/yzd_lingyongmingxi/yzdHuikumingxi/queryById",
          yzdHuikumingxiZi: {
            list: '/yzd_lingyongmingxi/yzdHuikumingxi/queryYzdHuikumingxiZiByMainId'
          },
        }
      }
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：false流程表单 true普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
      this.getselect();
      this.getCangkumingcheng()
      this.huojiahaolist = []
      this.getrenyuan()
    },
    methods: {
      getrenyuan(){
        getAction(this.url.renyuanurl).then(res => {
          console.log(11111111111111,res);
          res.result.records.forEach(element => {
            this.RenyuanList.push(element.name);
            
          })
        })
        
      },
  
  
  
        setcangkumingcheng(arr,row){
          this.cangkuming= arr
          this.huojiahaolist= []; 
          var re = {
            "cangkumingchedng":this.cangkuming,
            "huaxuepinmingcheng": this.huaxuepin
          }
          // postAction(this.url.getpicihao,re).then(res => {
          //   console.log(res);
          //   res.result.forEach(element => {
          //     this.huojiahaolist.push(element.picihao)
          //   })
          // })
          this.$refs.yzdHuikumingxiZi.setValues([{ 'rowKey': row.rowId,values:{
            'cangkumingcheng':arr
          }}]);
        },

      sethuaxuepin(arr,row){
        this.huaxuepin = arr
        this.$refs.yzdHuikumingxiZi.setValues([{ 'rowKey': row.rowId,values:{
        'huaxuepinmingcheng':arr
       }}]);
      },
      
      setpicihao(arr,row){
       this.$refs.yzdHuikumingxiZi.setValues([{ 'rowKey': row.rowId,values:{
        'picihao':arr
       }}]);
      },
  
      huoqupingshu(arr){
        this.pingshu = arr
      },
  
  
      getCangkumingcheng(){
        getAction(this.url.cangkumingcheng).then((res)=>{
            res.result.forEach(element => {
              this.cangkuminghceng.push(element.cangkumingcehng)
            });
        })
      },
  
      getselect() {
        getAction(this.url.xialakuang).then((res) => {
          res.result.records.forEach(element => {
              this.select.push(element.huaxuepinmingcheng)
            });
        })
  
      },
      addBefore(){
        this.form.resetFields()
        this.yzdHuikumingxiZiTable.dataSource=[]
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let fieldval = pick(this.model,'huaxuepinmingcheng','huaxuepindaima','huikuzhaungtai','huikurenxingming','huikurenbumen','huikushijian','huikupicihao','huikuliang','jiliangdanwei','zhucunweizhi','huikushenqingpaizhao','huikuchengzhongpaizhao','huikuwanchengpaizhao','huikuyuanyin','cangkumingcheng','gongsimingcheng','daoqishijian')
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.yzdHuikumingxiZi.list, params, this.yzdHuikumingxiZiTable)
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
          yzdHuikumingxiZiList: allValues.tablesValue[0].values,
        }
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          })
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     popupCallback(row){
       this.form.setFieldsValue(pick(row,'huaxuepinmingcheng','huaxuepindaima','huikuzhaungtai','huikurenxingming','huikurenbumen','huikushijian','huikupicihao','huikuliang','jiliangdanwei','zhucunweizhi','huikushenqingpaizhao','huikuchengzhongpaizhao','huikuwanchengpaizhao','huikuyuanyin','cangkumingcheng','gongsimingcheng','daoqishijian'))
     },

    }
  }
</script>

<style scoped>
</style>